<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OfflineFeedReader</title>
<link rel="stylesheet" href="css/contents.css" type="text/css" />
<script src="lib/js/jquery-1.7.1.min.js"></script>
</head>
<body>

<div id="wrapper">

<!-- header -->
<div id="navi">
    <header>
    <h1><img src="images/logo.png"></h1>
    <nav>
    <ul>
    <li>▼全てのアイテム</li>
    <li><a href="../html/">スター付きアイテム</a></li>
    </ul>
    <ul>
    <li>▼登録フィード</li>
    <li><a href="../html/">ニュースサイト名</a></li>
    <li><a href="../html/">ニュースサイト名</a></li>
    <li><a href="../html/">ニュースサイト名</a></li>
    <li><a href="../html/">ニュースサイト名</a></li>
    <li><a href="../html/">ニュースサイト名</a></li>
    <li><a href="../html/">ニュースサイト名</a></li>
    <li><a href="../html/">ニュースサイト名</a></li>
    <li><a href="../html/">ニュースサイト名</a></li>
    <li><a href="../html/">ニュースサイト名</a></li>
    </ul>
    </nav>
    </header>
</div>


<!-- main -->
<article style="position: relative">
	
    <div id="progress">
    <p class="floatL">status:Downloading 2000 items</p> 
    <img src="images/icon_close.png" onclick="$('#progress').toggle()" style="margin-left:4px;">
    <progress max=100 value=50>50%</progress>
    <p>Please wait...</p> 
    </div>
    <div class="icon">
        <img src="images/icon_online_off.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <img src="images/icon_dl_on.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <img src="images/icon_offline_off.png" class="floatL" style="margin-right:5px; padding-top:3px;">
    </div>
    <!-- news -->
    <ul>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star1.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star1.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star1.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star1.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star1.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star2.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    <li>
    	<img src="images/icon_star1.png" class="floatL" style="margin-right:5px; padding-top:3px;">
        <h3 class="floatL">SiteName</h3>
        <p class="floatL" style="margin:0 5px;">NewsTextNewsTextNewsTextNewsText</p>
        <p class="floatL" style="font-size:12px;">2010/01/20</p>
    </li>
    </ul>

    <!-- フッタ -->
    <footer>
    	<a href=""><img src="images/btn_prev.png"></a>
        <img src="images/line.png" style="margin:0 30px;">
        <a href=""><img src="images/btn_next.png" style="float:right;"></a>
    </footer>

</article>



</div><!-- wrapper -->

</body>
</html>